import { ref, reactive } from 'vue'
import { IPaginationFormWithCondition } from '@/types/http'
import { queryRolesListAPI } from '@/api/roles'
import { resetForm } from '@/utils/tools'
export default function (refInstance: any) {
  const tableColumns = [
    {
      label: '角色order',
      prop: 'order',
      width: '100px'
    },
    {
      label: '角色Id',
      prop: 'roleId',
      width: '100px'
    },
    {
      label: '角色名称',
      prop: 'roleName'
    },
    {
      label: '权限字符',
      prop: 'roleKey'
    },
    {
      label: '状态',
      prop: 'statusDetail'
    },
    {
      label: '排序',
      prop: 'order'
    },
    {
      label: '备注',
      prop: 'remarks'
    },
    {
      label: '创建时间',
      prop: 'createdAt',
      isTime: true
    },
    {
      label: '更新时间',
      prop: 'updatedAt',
      isTime: true
    }
  ]
  const queryForm = reactive({
    roleName: '',
    roleKey: '',
    status: ''
  })
  const tableData = ref<any>([])
  const page = reactive<IPaginationFormWithCondition>({
    pageNum: 1,
    pageSize: 20,
    total: 0
  })
  const options = {
    showOrder: false
  }

  const queryRolesList = async () => {
    try {
      const res = await queryRolesListAPI({ ...page, ...queryForm })
      tableData.value = res.data.list
      page.total = res.data.total
    } catch (e) {
      console.log(e)
    }
  }
  const handleReset = () => {
    resetForm(refInstance.value)
    queryRolesList()
  }
  return {
    tableColumns, tableData, page, options, queryForm, queryRolesList, handleReset
  }
}
